<template>
  <div id="app">
    <el-container id="router-content" ref="routerView" class="router-content">
      <el-header>
        <Header />
      </el-header>
      <el-main class="page_scroll">
        <home />
      </el-main>
      <el-footer>
        <Footer />
      </el-footer>
    </el-container>
    <transition
      name="pull-up"
      mode="out-in"
      enter-active-class="animated rollIn"
      leave-active-class="animated rollOut"
    >
      <div v-if="(device === 'desktop' || device === 'ipad') && scrollTop > 200" class="back-top" @click="toTop">
        <img src="../../assets/image/backtop/backtop.png" alt="backtop">
      </div>
    </transition>
  </div>
</template>

<script>
import Header from '@/components/Header/header'
import Footer from '@/components/Footer/footer'
import Home from '@/views/Home'
import { mapState } from 'vuex'
export default {
  name: 'App',
  components: { Header, Footer, Home },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      scrollTop: (state) => state.app.scrollTop,
      device: (state) => state.app.device
    })
  },
  beforeMount() {
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
  },
  mounted() {
    window.addEventListener('scroll', () => {
      const scrollTop = document.documentElement.scrollTop
      this.$store.commit('SET_SCROLL_TOP', scrollTop)
    })
    this.resizeHandler()
  },
  methods: {
    toTop() {
      document.body.scrollIntoView({
        behavior: 'smooth'
      })
    },
    setDevice() {
      const clientWidth = document.body.clientWidth
      this.$store.commit('SET_DEVICE_WIDTH', clientWidth)
      if (clientWidth - 0 >= 992) {
        this.$store.commit('SET_DEVICE', 'desktop')
      } else if (clientWidth - 0 < 992 && clientWidth - 0 >= 768) {
        this.$store.commit('SET_DEVICE', 'ipad')
      } else if (clientWidth - 0 < 768) {
        this.$store.commit('SET_DEVICE', 'mobile')
      }
    },
    resizeHandler() {
      if (!document.hidden) {
        this.setDevice()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#app {
  height: 100%;
  .router-content{
    height: 100%;
  }
  .back-top {
    position: fixed;
    bottom: 40px;
    right: 16px;
    width: 75px;
    height: 75px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
}
</style>
